<template>
  <van-space>
    <van-button type="primary" @click="createWallet">创建钱包</van-button>
    <van-button type="primary">导入钱包</van-button>
  </van-space>
  <ul class="wallet-info">
    <li v-if="password"><label>密码：</label><span>{{ password }}</span></li>
    <li v-if="mnemonic"><label>助记词：</label><span>{{ mnemonic }}</span><van-button size="mini" type="primary" @click="onConfirmSaveMnemonic">我已保存</van-button></li>
  </ul>
  <van-dialog v-model:show="isShow" title="请输入密码" show-cancel-button
  @confirm="onConfirmPwd" @cancel="onCancel">
    <van-cell-group inset>
        <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
    </van-cell-group>
  </van-dialog>
</template>

<script setup>
import { showNotify } from 'vant'
import { ref } from 'vue'
// 用于创建助记词
import * as bip39 from 'bip39'

const isShow = ref(false)
const password = ref('')
const mnemonic = ref('')
const createWallet = () => {
  isShow.value = true
}
const onConfirmPwd = () => {
  password.value = (password.value || '').trim()
  if (!password.value) {
    return showNotify({ type: 'danger', message: '请输入密码' })
  }
  // 1.生成助记词
  mnemonic.value = bip39.generateMnemonic()
}
const onCancel = () => {
  password.value = ''
}
const onConfirmSaveMnemonic = () => {

}
</script>

<style lang="scss" scoped>
.wallet-info {
    span {
        user-select: all;
        margin-right: 15px;
    }
    li > * {
        vertical-align: middle;
    }
}
</style>
